<template>
	<div class="layout-padding">
		<div class="layout-padding-auto layout-padding-view">
			<div class="flex items-center justify-between pb-2">
				<div>
					<el-breadcrumb separator-icon="ArrowRight">
						<el-breadcrumb-item :to="{ path: '/tariff/basicExpensesDviceConfig/index' }" replace>设备通讯费</el-breadcrumb-item>
						<el-breadcrumb-item>设备配送记录</el-breadcrumb-item>
					</el-breadcrumb>
				</div>
				<el-button type="primary" icon="CirclePlus" class="mr-2" @click="formDialogRef.openDialog(currentRow)">分配语音短信数</el-button>
			</div>
			<el-table
				:data="state.dataList"
				v-loading="state.loading"
				border
				:cell-style="tableStyle.cellStyle"
				:header-cell-style="tableStyle.headerCellStyle"
			>
				<el-table-column type="index" label="序号" width="60" />
				<el-table-column prop="imei" label="IMEI" show-overflow-tooltip min-width="200" />
				<el-table-column prop="deviceType" label="类型-型号" show-overflow-tooltip width="220">
					<template #default="{ row }">
						<span>
							{{ row.deviceType }}
							-
							{{ row.deviceModelName }}
						</span>
					</template>
				</el-table-column>
				<el-table-column prop="deptName" label="所属单位" show-overflow-tooltip min-width="220" />
				<el-table-column prop="giveDeptName" label="赠送单位" show-overflow-tooltip min-width="220" />
				<el-table-column prop="type" label="类型" show-overflow-tooltip width="80">
					<template #default="{ row }">
						<div>
							<el-tag v-if="row.type === 10" type="warning" size="small">短信</el-tag>
							<el-tag v-else type="success" size="small">语音</el-tag>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="deliveryMethod" label="分配方式" width="100">
					<template #default="{ row }">
						<div>
							<el-button link v-if="row.deliveryMethod === 20" type="primary" size="small">代付</el-button>
							<span v-else class="text-info" size="small">赠送</span>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="deliveryNum" label="赠送数量" show-overflow-tooltip min-width="110">
					<template #default="{ row }">
						<span>{{ row.deliveryNum === 999999 ? '无限制' : row.deliveryNum }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="remainNum" label="剩余数量" show-overflow-tooltip min-width="110">
					<template #default="{ row }">
						<span>{{ row.remainNum === 999999 ? '无限制' : row.remainNum }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="expirationDate" label="到期时间" show-overflow-tooltip width="160" />
				<el-table-column prop="createTime" label="创建时间" show-overflow-tooltip width="160" />
			</el-table>
		</div>
		<!-- 编辑、新增  -->
		<form-dialog ref="formDialogRef" @refresh="fetchList(currentRow.deviceId)" />
	</div>
</template>

<script setup name="basicExpensesDviceConfigDetail" lang="ts">
import { getDeliveryList } from '/@/api/tariff/basicExpensesDviceConfig';
import { BasicTableProps, useTable } from '/@/hooks/table';
import { useRoute } from 'vue-router';
// 引入组件
const FormDialog = defineAsyncComponent(() => import('./form.vue'));
const formDialogRef = ref();

const route = useRoute();
const state: BasicTableProps = reactive<BasicTableProps>({
	queryForm: {},
});
const currentRow = reactive({
	imei: '',
	deviceModelName: '',
	deviceType: '',
	deviceId: '',
	id: '',
	deptId: '',
});
//  table hook
const { tableStyle } = useTable(state);
onMounted(() => {
	const querys = route.query;
	if (querys?.deviceId) {
		state.queryForm.deviceId = querys.deviceId;
		Object.assign(currentRow, querys);
		fetchList(querys.deviceId as string);
	}
});
function fetchList(diviceId: string) {
	getDeliveryList(diviceId).then((res) => {
		state.dataList = res.data;
	});
}
</script>

<style lang="scss" scoped></style>
